Unique - Responsive vCard Complete Documentation v2.1.0

Thank you very much for purchasing from LMPixels!

If you have any issue or question that this document does not cover, you can contact us through this form - Suppor Form ("Contact Author" button). We do not provide support through comments.

Template Installation
HTML Structure
CSS Files and Structure
Scripts
PHP Integration (Contact Form)
Fonts
Credits
Customization
Updates
FAQ

Template Installation

You can view this template in any web browser from your computer, mobile device. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

Upload to The Server

It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
Select several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have three additional folders to upload: images, js and php.
Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js, .php into your FTP client.
Once the files are done uploading, you can try access your website via browser.

HTML Structure

This site template has a Responsive and Mobile-Friendly layout based on Bootstrap Boilerplate.

HTML files

index.html - main HTML file of this site template.
The main structure of this site is wrapped in a 'subpages' div. Inside of that div you will find sections of the site.
portfolio-1.html - HTML file with Portfolio page content.

CSS Files and Structure

I'm using one main CSS file (style.css) in this template which you are free to modify depending on the customization you require.

If you would like to edit the color, font, or style of any elements, you would do the following in css/main.css :

If you would like to edit a specific section or page of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

There are also five additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder. The 5 style sheets are:

bootstrap.css - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.
bootstrap.min.css - Minified version of bootstrap.css.
normalize.css - Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
transition-animations.css - CSS3 animation sets for subpages changer.
owl.carousel.css - The main stylesheet for Carousels (Testimonials block on About me subpage & Portfolio details page).
jquery.mCustomScrollbar.min.css" - The main stylesheet for jQuery custom content scroller.
magnific-popup.css - The main stylesheet for styling the lightbox.
animate.css - CSS3 animation sets for portfolio content loading.

These files are included in the 'head' of index.html:

Scripts

This template uses several scripts. If you're a developer, you will find this particularly useful.

jquery-2.1.3.min.js (version 2.1.3) - used by the various JS files as a library.
bootstrap.min.js - Bootstrap JS.
imagesloaded.pkgd.min.js - Detect when images have been loaded.
jquery.hoverdir.js - DirectionAwareHoverEffect.
jquery.shuffle.min.js - Categorize, sort, and filter a responsive grid of items.
jquery.magnific-popup.min.js - Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
masonry.pkgd.min.js - Cascading grid layout library
modernizr.custom.js - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
page-transition.js - Page transitions and ajax loaded pages.
validator.js - Contact form validator.
jquery.mCustomScrollbar.concat.min.js - jQuery custom content scroller
tilt.jquery.min.js - A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.
main.js - jQuery Plugins Initialisation, mobile menu, page loading animation.

PHP Integration (Contact Form)

This template also use the PHP engine for activate the contact form. Important: For the functioning of the contact form on your hosting should be PHP.

For contact us data direct send to your email address you can edit your email address in /contact_form/contact_form.php file.

Fonts

Arial, Helvetica, Sans-serif (both should be on your system as standard fonts)
Google Fonts Oxygen, PT Sans.
Font Awesome Font Awesome version 4.7.0 (The complete set of 675 icons).
7 stroke icons font by Pixeden.

Credits

Images (Just on live preview, not included in download package):

https://pixabay.com/
1. Main photo: https://unsplash.com/photos/ecH8mCm4nWk
2. Testimonials: https://unsplash.com/photos/h1BuNJZzpC8 and https://unsplash.com/photos/JoKS3XweV50

Videos

https://vimeo.com/channels/staffpicks

Customization

About files editing
Main navigation panel position and color scheme
Pages color scheme (light or dark)
Main title
Subpage title
Adding new subpage
Subpages animation effects. Random animations mode (Available since version 1.2.)
Edit about me subpage
Edit resume subpage
Edit portfolio subpage
YouTube and Vimeo Video Embedding
LESS version
RTL version (right-to-left)

1. About files editing

For editing files I recommend you use Sublime Text 2 or similar program. Convenient following functions: syntax highlighting, find and replace function (to accelerate editing), etc.

2. Main navigation panel position and color scheme

Three options for positioning the navigation bar: top, left and bottom.

By default, the panel is on the left. To change the positioning, you need to do the following:

Open index.html file
Go to line
```
<div id="page" class="page">
```

Add class layout-menu-top (panel on the top):

<div id="page" class="page layout-menu-top">

or layout-menu-bottom (panel on the bottom):

<div id="page" class="page layout-menu-bottom">

Save file.

To change the color scheme to the dark scheme or main color scheme, you need to do the following:/p>

Open index.html file

Go to line

<header id="site_header" class="header mobile-menu-hide header-color-light">

Delete class header-color-light

Add class header-color-dark (dark scheme):

<header id="site_header" class="header mobile-menu-hide header-color-dark">

or header-color-main (main color scheme):

<header id="site_header" class="header mobile-menu-hide header-color-main">

Save file.

3. Pages color scheme (light or dark)

To change the color scheme:

Open index.html file.
Go to line with
```
<div id="page" class="page">
```

Add class template-style-light (light scheme):

<div id="page" class="page template-style-light">

or template-style-light (dark scheme):

<div id="page" class="page template-style-dark">

Save file.

4. Main title

Open index.html.
Go to line with
```
<h1 class="site-title">Alex Smith</h1>
```
Change text.
Save file.

5. Subpage title

For example, the subpage "About me":

Open index.html.

Go to 'section' that you need edit. In our example is

<section class="pt-page pt-page-2" data-id="about_me">

Find 'div' with class="section-title-block".
Go to line with
```
<h2 class="section-title">About Me</h2>
```
Change text value.
Save file.

6. Adding new subpage

Open index.html.
Go to 'div' with class="subpages". Subpage is 'section' with HTML tags:
```
<section class="pt-page pt-page-1" data-id="about_me">
  <div class="section-inner">
    <div class="section-title-block">
      <h2 class="section-title">About Me</h2>
      <h5 class="section-description">Artist, Thinker, Creative Doer</h5>
    </div>

    <div class="row">
      Our content...
    </div>
  </div>
</section>
```
In my demo 5 sections:
1. Home <section class="pt-page pt-page-1" data-id="home">
2. About me <section class="pt-page pt-page-2" data-id="about_me">
3. Resume <section class="pt-page pt-page-3" data-id="resume">
4. Portfolio <section class="pt-page pt-page-4" data-id="portfolio">
5. Contact <section class="pt-page pt-page-5" data-id="contact">
As you can see in the sections change class="pt-page pt-page-" and attribute data-id. These values we need for the operation of the site navigation (main menu and the browser buttons "go back" and "go forward").
For example, add the section "Services". After existing sections do make a new one with class="pt-page pt-page-6" and data-id="services".

We get a section:

<section class="pt-page pt-page-6" data-id="services">
  <div class="section-inner">
    <div class="section-title-block">
      <h2 class="section-title">Services</h2>
      <h5 class="section-description">What I Can Do</h5>
    </div>

    <div class="row">
      Our new content...
    </div>
  </div>
</section>

Now we need to add a new item to the main menu. The main menu has the following structure:


<!-- Main menu -->
<ul id="nav" class="site-main-menu">
  <li>
    <a class="pt-trigger" href="#home" data-animation="21"><i class="menu-icon pe-7s-icon pe-7s-home"></i>Home</a><!-- href value = data-id without # of .pt-page. -->
  </li>
  <li>
    <a class="pt-trigger" href="#about_me" data-animation="17"><i class="menu-icon pe-7s-icon pe-7s-user"></i>About me</a>
  </li>
  <li>
    <a class="pt-trigger" href="#resume" data-animation="18"><i class="menu-icon pe-7s-icon pe-7s-id"></i>Resume</a>
  </li>
  <li>
    <a class="pt-trigger" href="#portfolio" data-animation="19"><i class="menu-icon pe-7s-icon pe-7s-portfolio"></i>Portfolio</a>
  </li>
  <li>
    <a class="pt-trigger" href="#contact" data-animation="20"><i class="menu-icon pe-7s-icon pe-7s-mail"></i>Contact</a>
  </li>
</ul>
<!-- /Main menu -->

Where data-animation="*" is the number of animation effect. More details about the animation effects you can read here.

Add a new item:

<li>
  <a class="pt-trigger" href="#services" data-animation="17"><i class="menu-icon pe-7s-icon pe-7s-mail"></i>Services</a>
</li>

Save file.

7. Subpages animation effects. Random animations mode (Available since version 1.3.)

7.1. Subpages animation effects

You can select any of the 67 variants of the animation. To do this, you need to specify the attribute 'data-animations' with the appropriate amount of animation for the respective menu item. Example:

<li>
  <a class="pt-trigger" href="#services" data-animation="17"><i class="menu-icon pe-7s-icon pe-7s-mail"></i>Services</a>
</li>

List of animation options:

1:
out effect: move to Left;
in effect: move from Right;

2:
out effect: move to Right;
in effect: move from Left;

3:
out effect: move to Top;
in effect: move from Bottom;

4:
out effect: move to Bottom;
in effect: move from Top;

5:
out effect: fade;
in effect: move from Right on top;

6:
out effect: fade;
in effect: move from Left on top;

7:
out effect: fade;
in effect: move from Bottom on top;

8:
out effect: fade;
in effect: move from Top on top;

9:
out effect: move to Left Fade;
in effect: move from Right Fade;

10:
out effect: move to Right Fade;
in effect: move from Left Fade;

11:
out effect: move to Top Fade;
in effect: move from Bottom Fade;

12:
out effect: move to Bottom Fade;
in effect: move from Top Fade;

13:
out effect: move to Left Easing on top;
in effect: move from Right;

14:
out effect: move to Right Easing on top;
in effect: move from Left;

15:
out effect: move to Top Easing on top;
in effect: move from Bottom;

16:
out effect: move to Bottom Easing on top;
in effect: move from Top;

17:
out effect: scale Down;
in effect: move from Right on top;

18:
out effect: scale Down;
in effect: move from Left on top;

19:
out effect: scale Down;
in effect: move from Bottom on top;

20:
out effect: scale Down;
in effect: move from Top on top;

21:
out effect: scale Down;
in effect: scale Up Down delay300;

22:
out effect: scale Down Up;
in effect: scale Up delay300;

23:
out effect: move to Left on top;
in effect: scale Up;

24:
out effect: move to Right on top;
in effect: scale Up;

25:
out effect: move to Top on top;
in effect: scale Up;

26:
out effect: move to Bottom on top;
in effect: scale Up;

27:
out effect: scale Down Center;
in effect: scale Up Center delay400;

28:
out effect: rotate Right Side First;
in effect: move from Right delay200 on top;

29:
out effect: rotate Left Side First;
in effect: move from Left delay200 on top;

30:
out effect: rotate Top Side First;
in effect: move from Top delay200 on top;

31:
out effect: rotate Bottom Side First;
in effect: move from Bottom delay200 on top;

32:
out effect: flip Out Right;
in effect: flip In Left delay500;

33:
out effect: flip Out Left;
in effect: flip In Right delay500;

34:
out effect: flip Out Top;
in effect: flip In Bottom delay500;

35:
out effect: flip Out Bottom;
in effect: flip In Top delay500;

36:
out effect: rotate Fall on top;
in effect: scale Up;

37:
out effect: rotate Out Newspaper;
in effect: rotate In Newspaper delay500;

38:
out effect: rotate Push Left;
in effect: move from Right;

39:
out effect: rotate Push Right;
in effect: move from Left;

40:
out effect: rotate Push Top;
in effect: move from Bottom;

41:
out effect: rotate Push Bottom;
in effect: move from Top;

42:
out effect: rotate Push Left;
in effect: rotate Pull Right delay180;

43:
out effect: rotate Push Right;
in effect: rotate Pull Left delay180;

44:
out effect: rotate Push Top;
in effect: rotate Pull Bottom delay180;

45:
out effect: rotate Push Bottom;
in effect: rotate Pull Top delay180;

46:
out effect: rotate Fold Left;
in effect: move from Right Fade;

47:
out effect: rotate Fold Right;
in effect: move from Left Fade;

48:
out effect: rotate Fold Top;
in effect: move from Bottom Fade;

49:
out effect: rotate Fold Bottom;
in effect: move from Top Fade;

50:
out effect: move to Right Fade;
in effect: rotate Unfold Left;

51:
out effect: move to Left Fade;
in effect: rotate Unfold Right;

52:
out effect: move to Bottom Fade;
in effect: rotate Unfold Top;

53:
out effect: move to Top Fade;
in effect: rotate Unfold Bottom;

54:
out effect: rotate Room Left Out on top;
in effect: rotate Room Left In;

55:
out effect: rotate Room Right Out on top;
in effect: rotate Room Right In;

56:
out effect: rotate Room Top Out on top;
in effect: rotate Room Top In;

57:
out effect: rotate Room Bottom Out on top;
in effect: rotate Room Bottom In;

58:
out effect: rotate Cube Left Out on top;
in effect: rotate Cube Left In;

59:
out effect: rotate Cube Right Out on top;
in effect: rotate Cube Right In;

60:
out effect: rotate Cube Top Out on top;
in effect: rotate Cube Top In;

61:
out effect: rotate Cube Bottom Out on top;
in effect: rotate Cube Bottom In;

62:
out effect: rotate Carousel Left Out on top;
in effect: rotate Carousel Left In;

63:
out effect: rotate Carousel Right Out on top;
in effect: rotate CarouselRight In;

64:
out effect: rotate Carousel Top Out on top;
in effect: rotate Carousel Top In;

65:
out effect: rotate Carousel Bottom Out on top;
in effect: rotate Carousel Bottom In;

66:
out effect: rotate Sides Out;
in effect: rotate Sides In delay200;

67:
out effect: rotate Slide Out;
in effect: rotate Slide In;

7.2. Random animations mode (Available since version 1.3.)

To activate a random animation mode, you need to remove the attribute 'data-animation' from the menu item. Example:

<li>
  <a class="pt-trigger" href="#services"><i class="menu-icon pe-7s-icon pe-7s-mail"></i>Services</a>
</li>

In this case, random animation will be applied, one of 67.

8. Edit about me subpage

8.1. Services

Open index.html file.
Find 'div' with 'class="service-block"
Edit text
Enter the name of the image.
If you want to use an icon instead of the image:
1. Go to div with class="service-info"
2. Replace this:
```
<img src="images/service/ecommerce.png" alt="E-Commerce">
```
  With this (7 stroke icons font by Pixeden. The complete set of 202 icons. Full icons list. ):
```
<i class="service-icon pe-7s-icon pe-7s-cart"></i>
```
  or this (Font Awesome: The complete set of 675 icons. Full icons list. ):
```
<i class="service-icon fa fa-shopping-cart"></i>
```
Save file.

8.2. Fun facts

By analogy with the "Services" block.

9. Edit resume subpage

9.1. Skills

Skill block:

<h4>Web Design</h4>
<div class="skill-container">
  <div class="skill-percentage skill-1"></div>
</div>

The value for the <div class="skill-percentage skill-1"> set in the css/main.css file:

/*Skill 1*/
.skill-percentage.skill-1 {
  width: 88%;
}

10. Edit portfolio subpage

The structure of the "Portfolio" subpage:

<!-- Portfolio Content -->
<div class="portfolio-content">
              
  <!-- Portfolio filter -->
  <ul id="portfolio_filters" class="portfolio-filters">
    <li class="active">
      <a class="filter btn btn-sm btn-link active" data-group="all">All</a>
    </li>
    ...
  </ul>
  <!-- End of Portfolio filter -->

  <!-- Portfolio Grid -->
  <div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">

    <!-- Portfolio Item 1 -->
    <figure class="item" data-groups='["all", "photography"]'>
        <a class="ajax-page-load" href="portfolio-1.html">
            <img src="images/portfolio/1.jpg" alt="">
            <div>
                <h5 class="name">Project Name</h5>
                <small>Media</small>
                <i class="pe-7s-icon pe-7s-display2"></i>
            </div>
        </a>
    </figure>
    <!-- /Portfolio Item 1 -->

    ...
    
  </div>
  <!-- /Portfolio Grid -->

</div>
<!-- /Portfolio Content -->

Each item in the portfolio grid should be wrapped in the HTML tag <figure>...</figure>

You can add two types of content:

Page loaded via Ajax (page containing the image, carousel, video, etc., and a full description). portfolio-1.html a file content.
Content displayed via LightBox (Full image or video and caption).

10.1. Portfolio details page loaded via Ajax

Link will have a class of "ajax-page-load" and the href attribute with a path to the HTML page (portfolio-1.html etc.):

<!-- Portfolio Item 1 -->
<figure class="item" data-groups='["all", "photography"]'>
  <a class="ajax-page-load" href="portfolio-1.html">
    <img src="images/portfolio/1.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Media</small>
      <i class="pe-7s-icon pe-7s-display2"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 1 -->

Note : To test this Ajax loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP. You must open the portfolio page (example portfolio-1.html) file using "http://" since Ajax makes HTTP requests.

Ajax request can be made only to the files that exist on the same web server that servers the page from which the Ajax request is sent, not to external or remote servers for security reasons. This is called same-origin policy.

10.2. Content displayed via LightBox

To display the image link will have a class of "lightbox" and the href attribute with a path to the image:

<!-- Portfolio Item 3 -->
<figure class="item" data-groups='["all","illustration"]'>
  <a href="images/portfolio/3.jpg" class="lightbox" title="Duis eu Eros Viverra">
    <img src="images/portfolio/3.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Illustration</small>
      <i class="pe-7s-icon pe-7s-photo"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 3 -->

To display the video link will have a classes of "lightbox mfp-iframe" and the href attribute with a URL to the video:

<!-- Portfolio Item 2 -->
<figure class="item" data-groups='["all", "video"]'>
  <a href="https://player.vimeo.com/video/97102654?autoplay=1" title="Lihtbox Title" class="lightbox mfp-iframe">
    <img src="images/portfolio/2.jpg" alt="">
    <div>
      <h5 class="name">Project Name</h5>
      <small>Video</small>
      <i class="pe-7s-icon pe-7s-video"></i>
    </div>
  </a>
</figure>
<!-- /Portfolio Item 2 -->

11. YouTube and Vimeo Video Embedding

Link format for embedding videos:

YouTube: https://www.youtube.com/embed/id. Example: https://www.youtube.com/embed/w5tWYmIOWGk

Vimeo: https://player.vimeo.com/video/id. Example: https://player.vimeo.com/video/97102654

Note : To test video loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP.

12. LESS version

This version differs in that instead of CSS file css/main.css styles we use LESS file less/main.less with programmable styles. More about LESS you can read here.

This version allows you to quickly change the colors of the template and fonts, just change the variables at the beginning of the file:

13. RTL version (right-to-left)

RTL version available with CSS stylesheet.

13.1 Changing of the main color to blue, green, orange, yellow or violet.

By default, the main color is red.

To change the main color to one of the predefined:

Open index.html file

Go to line

<link rel="stylesheet" href="css/main-red.css" type="text/css">

Replace this line with one of the following:

Blue:

<link rel="stylesheet" href="css/main-blue.css" type="text/css">

Green:

<link rel="stylesheet" href="css/main-green.css" type="text/css">

Orange:

<link rel="stylesheet" href="css/main-orange.css" type="text/css">

Yellow:

<link rel="stylesheet" href="css/main-yellow.css" type="text/css">

Violet:

<link rel="stylesheet" href="css/main-violet.css" type="text/css">

Updates

Version 1.3.1

Changes:

Improved: Mobile mode: Added disabling the custom scroll to improve performance on older devices.

Files changed:

css/main.css (less/main.less for less version): added new lines to the @media only screen and (max-width: 991px):
```
.pt-page-current, .no-js .pt-page {
  overflow: auto;
}
```

js/main.js: this code:

//On Window load & Resize
$(window)
    .on('load', function() { //Load
        // Animation on Page Loading
        $(".preloader").fadeOut("slow");

        // initializing page transition.
        var ptPage = $('.subpages');
        if (ptPage[0]) {
            PageTransitions.init({
                menu: 'ul.site-main-menu',
            });
        }

        // Custom Subpage Scroll
        $(".pt-page").mCustomScrollbar({
            scrollInertia: 8
        });

        // Custom Header Scroll
        $("#site_header").mCustomScrollbar({
            scrollInertia: 8
        });
    })
    .on('resize', function() { //Resize
         mobileMenuHide();
    });

replaced with this code:

// Custom scroll
function customScroll() {
    var windowWidth = $(window).width();
    if (windowWidth > 991) {
        // Custom Subpage Scroll
        $(".pt-page").mCustomScrollbar({
            scrollInertia: 8,
            documentTouchScroll: false
        });

        // Custom Header Scroll
        $("#site_header").mCustomScrollbar({
            scrollInertia: 8,
            documentTouchScroll: false
        });
    } else {
        $(".pt-page").mCustomScrollbar('destroy');

        $("#site_header").mCustomScrollbar('destroy');
    }
}
// /Custom scroll

//On Window load & Resize
$(window)
    .on('load', function() { //Load
        // Animation on Page Loading
        $(".preloader").fadeOut("slow");

        // initializing page transition.
        var ptPage = $('.subpages');
        if (ptPage[0]) {
            PageTransitions.init({
                menu: 'ul.site-main-menu',
            });
        }
        customScroll();
    })
    .on('resize', function() { //Resize
         mobileMenuHide();
         customScroll();
    });

this code for RTL version only:

// Custom scroll
function customScroll() {
    var windowWidth = $(window).width();
    if (windowWidth > 991) {
        // Custom Subpage Scroll
        $(".pt-page").mCustomScrollbar({
            scrollInertia: 8,
            dir: 'rtl',
            documentTouchScroll: false
        });

        // Custom Header Scroll
        $("#site_header").mCustomScrollbar({
            scrollInertia: 8,
            dir: 'rtl',
            documentTouchScroll: false
        });
    } else {
        $(".pt-page").mCustomScrollbar('destroy');

        $("#site_header").mCustomScrollbar('destroy');
    }
}
// /Custom scroll

//On Window load & Resize
$(window)
    .on('load', function() { //Load
        // Animation on Page Loading
        $(".preloader").fadeOut("slow");

        // initializing page transition.
        var ptPage = $('.subpages');
        if (ptPage[0]) {
            PageTransitions.init({
                menu: 'ul.site-main-menu',
            });
        }
        customScroll();
    })
    .on('resize', function() { //Resize
        mobileMenuHide();
        customScroll();
    });

portfolio-*.html files: replaced this code:

jQuery(document).ready(function($){

    // Ajax Loaded Page Scroll
    $("#ajax-page").mCustomScrollbar({
        scrollInertia: 8
    });

    $('.portfolio-page-carousel').owlCarousel({
        smartSpeed:1200,
        items: 1,
        loop: true,
        dots: true,
        nav: true,
        navText: false,
        margin: 10
    });

});

With this code:

function customAjaxScroll() {
    var windowWidth = $(window).width();
    if (windowWidth > 991) {
        // Custom Ajax Page Scroll
        $("#ajax-page").mCustomScrollbar({
            scrollInertia: 8,
            documentTouchScroll: false
        });
    } else {
        $("#ajax-page").mCustomScrollbar('destroy');
    }
}

jQuery(document).ready(function($){

    // Ajax Loaded Page Scroll
    customAjaxScroll();


    $('.portfolio-page-carousel').owlCarousel({
        smartSpeed:1200,
        items: 1,
        loop: true,
        dots: true,
        nav: true,
        navText: false,
        margin: 10
    });

});

jQuery(window).on('resize', function() {
    customAjaxScroll();
});

this code for RTL version only:

function customAjaxScroll() {
    var windowWidth = $(window).width();
    if (windowWidth > 991) {
        // Custom Ajax Page Scroll
        $("#ajax-page").mCustomScrollbar({
            scrollInertia: 8,
            dir: 'rtl',
            documentTouchScroll: false
        });
    } else {
        $("#ajax-page").mCustomScrollbar('destroy');
    }
}

jQuery(document).ready(function($){

    // Ajax Loaded Page Scroll
    customAjaxScroll();


    $('.portfolio-page-carousel').owlCarousel({
        smartSpeed:1200,
        items: 1,
        loop: true,
        dots: true,
        nav: true,
        navText: false,
        margin: 10
    });

});

jQuery(window).on('resize', function() {
    customAjaxScroll();
});

The upgrade process from version 1.3.1 to version 2.0 (23 November 2018)

Changes:

New Feature: Added navigation between subpages using arrows
Improved: CSS Styles: Added ability for smooth scrolling for iOS

Instruction:

Open css/main.css (less/main.less for less version) file

At the end of the file, add the following code:

/* ============================================================================= 
12. Updates
============================================================================= */
/*===== v2.0.0 - 23 November 2018 =====*/
/* Arrows Nav */
.lmpixels-arrows-nav {
  position: absolute;
  bottom: 10px;
  right: 15px;
  z-index: 100;
}

.lmpixels-arrows-nav > div {
  display: inline-block;
  padding: 0;
  background-color: #fff;
  height: 40px;
  width: 40px;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 0 14px 0 rgba(0,0,0,.12);
  -moz-box-shadow: 0 0 14px 0 rgba(0,0,0,.12);
  box-shadow: 0 0 14px 0 rgba(0,0,0,.12);
}

.lmpixels-arrows-nav > div:hover {
  -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,.22);
  -moz-box-shadow: 0 0 25px 0 rgba(0,0,0,.22);
  box-shadow: 0 0 25px 0 rgba(0,0,0,.22);
}

.lmpixels-arrows-nav > div:first-child {
  margin-right: 1px;
}

.lmpixels-arrows-nav > div i {
  line-height: 40px;
  height: 40px;
  margin-top: -1px;
  font-size: 40px;
  color: #222;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lmpixels-arrows-nav > div:hover i {
  color: #ff724c;
}
/* /Arrows Nav */
@media only screen and (max-width: 768px) {
  .lmpixels-arrows-nav > div {
    height: 32px;
    width: 32px;
  }

  .lmpixels-arrows-nav > div i {
    line-height: 32px;
    height: 32px;
    font-size: 32px;
  }
}

@media only screen and (max-width: 991px) {
  .pt-page-current, .no-js .pt-page, .ajax-page-content {
    -webkit-overflow-scrolling: touch;
  }
}
/*===== /v2.0.0 - 23 November 2018 =====*/

Depending on the main color, change this value - #ff724c (to your main color):
```
.lmpixels-arrows-nav > div:hover i {
  color: #ff724c;
}
```
Save changes
Open js/pages-switcher.js file

Find these lines:

location.hash = pageStart;
var menuLink = $(menu+' a[href*="'+location.hash.split('/')[0]+'"]');

activeMenuItem(menuLink);

Animate(menuLink);

Immediately after these lines, add these lines:

$(".lmpixels-arrow-right").click(function() {
    var activeItem = $('.site-main-menu li.active');
    activeItem.next("li").children("a").click();
    if ( activeItem.is(':last-child') ) {
        $('.site-main-menu li:first-child').children("a").click();
    }
});

$(".lmpixels-arrow-left").click(function() {
    var activeItem = $('.site-main-menu li.active');
    activeItem.prev("li").children("a").click();
    if ( activeItem.is(':first-child') ) {
        $('.site-main-menu li:last-child').children("a").click();
    }
});

Save changes
Open index.html file:
Find these lines:
```
</div>

```

Immediately after these lines, add these lines:

<!-- Arrows Nav -->
<div class="lmpixels-arrows-nav">
  <div class="lmpixels-arrow-left"><i class="pe-7s-icon pe-7s-angle-left"></i></div>
  <div class="lmpixels-arrow-right"><i class="pe-7s-icon pe-7s-angle-right"></i></div>
</div>
<!-- /Arrows Nav -->

Save changes
Clear your browser's cache.

Difference in updating the template for the RTL version (right-to-left):

Open css/main.css file

At the end of the file, add the following code:

/* ============================================================================= 
12. Updates
============================================================================= */
/*===== v2.0.0 - 23 November 2018 =====*/
/* Arrows Nav */
.lmpixels-arrows-nav {
  position: absolute;
  bottom: 10px;
  left: 15px;
  z-index: 100;
}

.lmpixels-arrows-nav > div {
  display: inline-block;
  padding: 0;
  background-color: #fff;
  height: 40px;
  width: 40px;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0 0 14px 0 rgba(0,0,0,.12);
  -moz-box-shadow: 0 0 14px 0 rgba(0,0,0,.12);
  box-shadow: 0 0 14px 0 rgba(0,0,0,.12);
}

.lmpixels-arrows-nav > div:hover {
  -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,.22);
  -moz-box-shadow: 0 0 25px 0 rgba(0,0,0,.22);
  box-shadow: 0 0 25px 0 rgba(0,0,0,.22);
}

.lmpixels-arrows-nav > div:first-child {
  margin-right: 1px;
}

.lmpixels-arrows-nav > div i {
  line-height: 40px;
  height: 40px;
  margin-top: -1px;
  font-size: 40px;
  color: #222;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.lmpixels-arrows-nav > div:hover i {
  color: #ff724c;
}
/* /Arrows Nav */
@media only screen and (max-width: 768px) {
  .lmpixels-arrows-nav > div {
    height: 32px;
    width: 32px;
  }

  .lmpixels-arrows-nav > div i {
    line-height: 32px;
    height: 32px;
    font-size: 32px;
  }
}

@media only screen and (max-width: 991px) {
  .pt-page-current, .no-js .pt-page, .ajax-page-content {
    -webkit-overflow-scrolling: touch;
  }
}
/*===== /v2.0.0 - 23 November 2018 =====*/

Depending on the main color, change this value - #ff724c (to your main color):
```
.lmpixels-arrows-nav > div:hover i {
  color: #ff724c;
}
```
Save changes
Open index.html file:
Find these lines:
```
</div>

```

Immediately after these lines, add these lines:

<!-- Arrows Nav -->
<div class="lmpixels-arrows-nav">
  <div class="lmpixels-arrow-left"><i class="pe-7s-icon pe-7s-angle-right"></i></div>
  <div class="lmpixels-arrow-right"><i class="pe-7s-icon pe-7s-angle-left"></i></div>
</div>
<!-- /Arrows Nav -->

The upgrade process from version 2.0.0 to version 2.1.0 (3 July 2019)

Changes:

Fixed: Some iOS mobile devices do not display the Contacts page correctly.
Fixed: In some versions of the template, there is no code for the page control buttons.

Instruction:

Open css/main.css (less/main.less for less version) file

At the end of the file, add the following code:

/*===== /v2.1.0 - 3 July 2019 =====*/
@media only screen and (max-width: 991px) {
  .pt-page, .ajax-page-content, .pt-page * {
    -webkit-transform: translateZ(0);
  }
}
/*===== /v2.1.0 - 3 July 2019 =====*/

FAQ

Q: I work with the template on the local computer without using a server or local server and the following problem arose - the portfolio Media projects are not opened.
A: These portfolio projects are opened with the help of Ajax technology, for correct operation of Ajax you need to use a server or a local server, i.e. the page of the template should be opened through the protocol https:// or https://, and not throught the protocol file://. These are the rules of browsers. But there is one exception, it's the Mozilla Firefox browser.

Once again, thank you so much for purchasing this template. As we said at the beginning, we'd be glad to help you if you have any questions relating to this template.

Unique - Responsive vCard Template v2.1.0

Complete Documentation

Thank you very much for purchasing from LMPixels!

Table of Contents

Template Installation

Upload to The Server

HTML Structure

HTML files

CSS Files and Structure

Scripts

PHP Integration (Contact Form)

Fonts

Credits

Customization

1. About files editing

2. Main navigation panel position and color scheme

3. Pages color scheme (light or dark)

4. Main title

5. Subpage title

6. Adding new subpage

7. Subpages animation effects. Random animations mode (Available since version 1.3.)

7.1. Subpages animation effects

7.2. Random animations mode (Available since version 1.3.)

8. Edit about me subpage

8.1. Services

8.2. Fun facts

9. Edit resume subpage

9.1. Skills

10. Edit portfolio subpage

10.1. Portfolio details page loaded via Ajax

10.2. Content displayed via LightBox

11. YouTube and Vimeo Video Embedding

12. LESS version

13. RTL version (right-to-left)

13.1 Changing of the main color to blue, green, orange, yellow or violet.

Updates

Version 1.3.1

The upgrade process from version 1.3.1 to version 2.0 (23 November 2018)

Changes:

Instruction:

Difference in updating the template for the RTL version (right-to-left):

The upgrade process from version 2.0.0 to version 2.1.0 (3 July 2019)

Changes:

Instruction:

FAQ